<template>
<div id="auth">
  <!--登录注册导航条-->
  <Navbar :unauth="true"></Navbar>

  <transition enter-active-class="animated slideInLeft"
    leave-active-class="animated rotateOutDownLeft">
    <mu-form ref="form" :model="validateForm" class="auth-form login" v-if="type === 'login'" key="1">
      <div class="form-content">
        <h2 class="logo">Lovers</h2>
        <mu-form-item prop="username" :rules="usernameRules">
          <mu-text-field v-model="validateForm.username" prop="username" label="用户名" label-float>
            <mu-icon size="24" value="person" left></mu-icon>
          </mu-text-field>
        </mu-form-item>
        <mu-form-item prop="password" :rules="passwordRules">
          <mu-text-field type="password" v-model="validateForm.password" prop="password" label="密码" label-float>
            <mu-icon size="24" value="lock"></mu-icon>
          </mu-text-field>
        </mu-form-item>
        <mu-row justify-content="end">
          <mu-col span="6">
            <a href="#" class="link">忘记密码？</a>
          </mu-col>
        </mu-row>
        <mu-form-item prop="isAgree" :rules="argeeRules">
          <mu-checkbox label="记住密码" v-model="validateForm.isAgree"></mu-checkbox>
        </mu-form-item>
        <mu-form-item>
          <mu-button color="primary" @click="submit">登录</mu-button>
          <mu-button @click="change('regist')">去注册</mu-button>
        </mu-form-item>
      </div>
    </mu-form>
    <mu-form ref="form" :model="validateForm" class="auth-form regist" v-if="type === 'regist'" key="2">
      <div class="form-content">
        <h2 class="logo">Lovers</h2>
        <mu-form-item prop="username" :rules="usernameRules">
          <mu-text-field v-model="validateForm.username" prop="username" label="用户名" label-float>
            <mu-icon size="24" value="person" left></mu-icon>
          </mu-text-field>
        </mu-form-item>
        <mu-form-item prop="password" :rules="passwordRules">
          <mu-text-field type="password" v-model="validateForm.password" prop="password" label="密码" label-float>
            <mu-icon size="24" value="lock"></mu-icon>
          </mu-text-field>
        </mu-form-item>
        <mu-row justify-content="end">
          <mu-col span="6">
            <a href="#" class="link">忘记密码？</a>
          </mu-col>
        </mu-row>
        <mu-form-item prop="isAgree" :rules="argeeRules">
          <mu-checkbox label="同意" v-model="validateForm.isAgree"></mu-checkbox><a href="#" style="margin-left: -10px;">LOVERS用户协议</a>
        </mu-form-item>
        <mu-form-item>
          <mu-button color="primary" @click="submit">注册</mu-button>
          <mu-button @click="change('login')">去登录</mu-button>
        </mu-form-item>
      </div>
    </mu-form>
  </transition>
</div>
</template>

<script>
import Vue from 'vue'
import Navbar from '@/components/Navbar'
import {
  Button,
  Checkbox,
  Form,
  Grid,
  TextField,
  Icon,
  Helpers
} from 'muse-ui'
Vue.use(Form).use(Grid).use(TextField).use(Checkbox).use(Button).use(Icon).use(Helpers)
export default {
  name: 'Auth',
  data () {
    return {
      usernameRules: [
        {
          validate: (val) => !!val,
          message: '必须填写用户名'
        },
        {
          validate: (val) => val.indexOf('@') !== -1 && val.indexOf('.') !== -1 ? true : /^1(\d{10})$/.test(val),
          message: '用户名格式不正确'
        }
      ],
      passwordRules: [
        {
          validate: (val) => !!val,
          message: '必须填写密码'
        },
        {
          validate: (val) => val.length >= 6 && val.length <= 15,
          message: '密码长度大于5小于16'
        }
      ],
      argeeRules: [
        {
          validate: (val) => !!val,
          message: '必须同意用户协议'
        }
      ],
      validateForm: {
        username: '',
        password: '',
        isAgree: false
      }
    }
  },
  components: { Navbar },
  props: {
    type: String
  },
  methods: {
    submit () {
      this.$refs.form.validate().then((result) => {
        console.log('form valid: ', result)
      })
    },
    change (message) {
      this.$router.push({ name: 'auth', params: { type: message } })
    }
  }
}
</script>

<style lang="less" scoped>
#auth {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  background: url(../assets/image/lovers.png) no-repeat top right;
  background-size: cover;
  display: flex;
  align-items: center;
  .auth-form {
    box-shadow: 0 0 5px rgba(128, 128, 128, 0.44);
    margin-bottom: 10%;
    background: #fff url("../assets/image/modelbg.png") 50px -20px no-repeat ;
    border-radius: 5px;
    transition: box-shadow 1s;
    border: 1px solid #ccc;
    position: absolute;
    @media screen and (min-width:600px) {
      width: 50%;
      top: 15%;
      left: 5%;
    }
    @media screen and (max-width:600px) {
      width: 90%;
      top: 15%;
      left: 5%;
    }
    .form-content {
      padding: 10px 20px;
    }
    &:hover {
      box-shadow: 0 0 20px rgba(128, 128, 128, 0.44);
    }
    .logo {
      color: rgba(142, 142, 142, 0.92);
      font-size: 30px;
      line-height: 40px;
    }
    .link {
      display: block;
      text-align: right;
      margin-top: -30px;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>
